<template>
  <el-form :inline="true" :model="formObj" size="small">
    <el-form-item
      v-for="item in formInputs"
      :key="item.name"
      :label="item.label"
      :props="item.name"
    >
      <el-input
        v-if="item.type === 'input'"
        v-model="formObj[item.name]"
        :placeholder="item.placeholder || `请选择${item.label}`"
      />
      <el-select
        v-else-if="item.type === 'select'"
        :multiple="item.multiple"
        v-model="formObj[item.name]"
        :placeholder="item.placeholder || `请选择${item.label}`"
        :disabled="item.disabled"
      >
        <el-option
          v-for="o in item.options"
          :key="o.value"
          :value="o.value"
          :label="o.label"
        />
      </el-select>
      <el-date-picker
        v-else-if="item.type === 'datetime'"
        v-model="formObj[item.name]"
        :placeholder="item.placeholder || `请选择${item.label}`"
        :disabled="item.disabled"
        :disabledDate="item.disabledDate"
      />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submit">查询</el-button>
    </el-form-item>
  </el-form>
</template>
<script>
import _ from "lodash";
import { reactive, toRefs } from "vue";

export default {
  props: {
    formInputs: {
      required: true,
      type: Array,
    },
  },
  setup(props, context) {
    const { formInputs } = props;

    // 根据传参构建对象
    const formObj = _.reduce(
      formInputs,
      (arr, o) => {
        arr[o.name] = o.defaultValue;
        return arr;
      },
      {}
    );
    const state = reactive({ formObj });

    const submit = () => {
      context.emit("submit", { ...state.formObj });
    };
    return {
      ...toRefs(state),
      formInputs,
      submit,
    };
  },
};
</script>
<style lang="less" scoped></style>
